<template>
  <div class="setRole">
    <el-dialog
      :title="'为【' + myname + '】分配权限'"
      :visible="showRole"
      @close="cancle"
    >
      <el-tree
        ref="mytree"
        :data="roleList"
        :props="{ label: 'name' }"
        node-key="id"
        default-expand-all
        show-checkbox
        check-strictly
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle"> 取消</el-button>
        <el-button @click="submit" type="primary"> 确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPerApi } from "@/api/permission";
import { getRoleRightApi } from "@/api/role";
import { getRoleDetailApi } from "@/api/role";
export default {
  name: "setrole",
  // myname： 当前权限分配的角色名
  // showRole： 控制面板的显示与隐藏
  props: ["myname", "showRole"],
  data() {
    return {
      // 权限列表
      roleList: [],
      // 当前操作角色的 id
      roleId: ""
      // 权限名字
      // myname: ""
    };
  },
  methods: {
    // 根据 id 获取详情
    async getRightById(id) {
      this.roleId = id;
      const res = await getRoleDetailApi(id);
      // console.log(res);
      this.$refs.mytree.setCheckedKeys(res.data.permIds);
    },

    // 得到所有的权限列表
    async getAllPer(id) {
      const res = await getAllPerApi(id);
      // console.log(res);
      this.roleList = this.trunData(res.data, "0");
      // // 当得到的角色权限渲染到页面上
      this.$nextTick(() => {
        // this.$refs.mytree.setCheckedKeys(res.data.permIds);
      });
    },
    // 定义了一个树状结构数据的方法
    trunData(arr, pid) {
      const res = [];
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.trunData(arr, item.id);
          if (son.length > 0) {
            item.children = son;
          }
          res.push(item);
        }
      });
      return res;
    },

    // 点击取消的事件
    cancle() {
      this.$emit("update:showRole", false);
      // this.showRole = false;
    },
    // 点击成功的事件
    async submit() {
      const roleList = this.$refs.mytree.getCheckedKeys();

      await getRoleRightApi({
        id: this.roleId,
        permIds: roleList
      });
      console.log(this.roleId);
      // 提示权限分配成功
      this.$message.success("修改权限成功");
      // 关闭面板
      this.$emit("update:showRole", false);
    }
  },
  created() {
    this.getAllPer();
    this.getRightById();
  }
};
</script>

<style lang="scss">
.setRole {
  margin: 20px;
}
</style>
